<template>
    <div class="members-container">
        <el-card>
            <el-card class="select-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="会员卡号">
                        <el-input v-model="form.memberCode" placeholder="请输入会员卡号" class="query-input"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                    <el-button type="success" @click="dialogVisible = true">添加会员</el-button>
                </el-form>
            </el-card>
            <el-table :data="tableData" style="width: 100%" border width="100%" max-height="600">
                <el-table-column fixed prop="memberCode" label="会员卡号" width="150"></el-table-column>
                <el-table-column prop="memberName" label="姓名">
                </el-table-column>
                <el-table-column prop="cardTime" label="办卡时间" width="120">
                </el-table-column>
                <el-table-column prop="memberGender" label="性别" width="120">
                </el-table-column>
                <el-table-column prop="memberAge" label="年龄">
                </el-table-column>
                <el-table-column prop="memberPhone" label="联系方式" width="120">
                </el-table-column>
                <el-table-column prop="memberHeight" label="身高">
                </el-table-column>
                <el-table-column prop="memberWeight" label="体重">
                </el-table-column>
                <el-table-column prop="cardClass" label="购买课时">
                </el-table-column>
                <el-table-column prop="cardNextClass" label="剩余课时"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" plain size="mini">编辑</el-button>
                        <el-button @click="handleClick(scope.row)" type="danger" plain size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination :current-page="currentPage" :page-sizes="[10, 30, 60, 90]" :page-size="pageSize"
                    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="添加会员" :visible.sync="dialogVisible" :before-close="handleClose" class="dialog">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="卡号" prop="member_account">
                    <el-input v-model="ruleForm.member_account" disabled placeholder="卡号由系统自动生成"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="member_name">
                    <el-input v-model="ruleForm.member_name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="member_age">
                    <el-input v-model="ruleForm.member_age"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="member_password">
                    <el-input v-model="ruleForm.member_password" disabled placeholder="密码默认为123456"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="member_gender">
                    <el-radio-group v-model="ruleForm.member_gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系方式" prop="member_phone">
                    <el-input v-model="ruleForm.member_phone"></el-input>
                </el-form-item>
                <el-form-item label="身高" prop="member_height">
                    <el-input v-model="ruleForm.member_height" placeholder="cm"></el-input>
                </el-form-item>
                <el-form-item label="体重" prop="member_weight">
                    <el-input v-model="ruleForm.member_weight" placeholder="kg"></el-input>
                </el-form-item>
                <el-form-item label="购买课时" prop="card_class">
                    <el-input v-model="ruleForm.card_class"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
            <!-- <span slot="footer" class="dialog-footer">
                
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    data() {
        return {
            form: {
                memberCode: null
            },
            dialogVisible: false,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            ruleForm: {
                member_account: '',
                member_name: '',
                member_password: '',
                member_age: '',
                member_gender: '男',
                member_phone: '',
                member_height: '',
                member_weight: '',
                card_class: '',
                card_next_class: ''
            },
            rules: {
                member_name: [
                    { required: true, message: '请输入会员名', trigger: 'blur' }
                ],
                member_age: [
                    { required: true, message: '年龄不能为空' },
                    { type: 'number', message: '年龄必须为数字值' }
                ],
                member_phone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' }
                ],
                member_height: [
                    { type: 'number', message: '身高必须为数字' }
                ],
                member_weight: [
                    { type: 'number', message: '体重必须为数字' }
                ],
                card_class: [
                    { type: 'number', message: '课时必须为数字' }
                ]
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getList()
        },
        handleClick(val) {
            this.getList()
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getList() {
            request({
                url: '/gym-member/member/list',
                method: 'get',
                params: {
                    memberCode: this.form.memberCode,
                    pageNo: this.currentPage,
                    pageSize: this.pageSize
                }
            }).then(res => {
                const data = res.data
                this.tableData = data.records
                this.currentPage = data.current
                this.total = data.total
                console.log(res);
            })
        }
    },
    created() {
        this.getList()
    },
}
</script>

<style scoped lang='scss'>
.members-container {
    .select-box {
        .query-input {
            width: 300px;
            margin-right: 10px;
        }
    }

    .dialog {
        margin-top: -10vh;
    }

    .pagination {
        padding-top: 10px;
    }
}
</style>
